<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="slippry.min.js"></script>
<link rel="stylesheet" href="slippry.css">

<script type="text/javascript">
	$(function() {
		$('#slippry-demo').slippry({
			controls : true,
			//speed: 100
			transition : 'fade',
			//auto: true,
			//autoDelay: 1,
			//pause: 3000,	//时间
			autoHoverDelay : 211,
			//autoHover: true,
			adaptiveHeight : false,
			pager : false,
		});

		$('#portfolio-demo').slippry({
			// general elements & wrapper
			slippryWrapper : '<div class="sy-box portfolio-slider" />', // wrapper to wrap everything, including pager

			// options
			adaptiveHeight : false, // height of the sliders adapts to current slide
			start : 'random', // num (starting from 1), random
			loop : false, // first -> last & last -> first arrows
			captionsSrc : 'li',
			captions : 'custom', // Position: overlay, below, custom, false
			captionsEl : '.external-captions',

			// transitions
			transition : 'fade', // fade, horizontal, kenburns, false
			easing : 'linear', // easing to use in the animation [(see... [jquery www])]
			continuous : false,

			// slideshow
			auto : false
		});
	});
</script>
<style>
*{
	margin: 0px;
	padding: 0px;
}
.box_width {
	width: 600px;
	margin-bottom: 100px;
}
</style>
</head>

<body>

	<div class="box_width">
		<ul id="portfolio-demo">
			<li title="This is caption 1 <a href='#link'>Even with links!</a>">
				<a href="#slide1"><img src="img/image-1.jpg"
					alt="demo1_1"></a>
			</li>
			<li title="This is caption 2"><a href="#slide2"><img
					src="img/image-2.jpg" alt="demo1_2"></a></li>
			<li
				title="And this is some very long caption for slide 3. Yes, really long.">
				<a href="#slide3"><img src="img/image-3.jpg"
					alt="demo1_3"></a>
			</li>
			<li title="And this is some very long caption for slide 4."><a
				href="#slide4"><img src="img/image-4.jpg"
					alt="demo1_4"></a></li>
		</ul>
	</div>

	<ul id="slippry-demo">
		<li><a href="#slide1"><img src="img/image-1.jpg"
				alt="Welcome to Slippry!"></a></li>
		<li><a href="#slide2"><img src="img/image-2.jpg"
				alt="This is an awesome jQuery slider plugin."></a></li>
		<li><a href="#slide2"><img src="img/image-3.jpg"
				alt="This is an awesome jQuery slider plugin."></a></li>
		<li><a href="#slide3"><img src="img/image-4.jpg"
				alt="Check it out, you are going to "></a></li>
	</ul>

</body>
</html>
